import React from 'react';
import Header from './../module/header/header.js';
import Footer from './../module/footer/footer.js';
import CommonBox from './../module/box/CommonBox.js';
import PostBody from './../module/box/postbody.js';
import Editor from './editor.js';
import {postByCategory,postByType,submit,getype,checkLogin} from './../api';
import {remove} from './../store';
import './../static/css/postlist.css';
import './../static/css/style.css';

export default class Postlist extends React.Component {
	constructor(props) {
	  super(props);
	   this.state = {
	  	count:0,
	  	fmenu:['商务合作','加入我们','意见反馈','关于我们','联系我们','版权声明','隐私保护'],
	  	spost:[],
	  	content:"",
	  	data: null,
	  	categoryid:-1,
	  	title:'',
	  	types:[],
	  	typeid:-1,
	  	login:false
	  };

	}

    componentWillMount() {
    	checkLogin().then(resp=>{
	  		if(resp.content==true) {
	  			this.setState({
	  				'login':true
	  			})
	  		} else {
	  			console.info('登录失败');
	  			remove('_user');
	  			remove('login_status');
	  			remove('token');
	  			remove('username');
	  		}
  		});
    	const param = this.props.location.search.substr(1);
    	const params = new Map();
    	const r = param.split("&");
    	for(var i=0;i<r.length;i++) {
    		const k = r[i].split("=");
    		params.set(k[0],k[1]);
    	}
    	let cid = params.get("categoryid");
    	let tid = params.get("typeid");
    	if(!cid) {
    		cid = 0;
    	} 		
		getype({typeid:cid}).then(resp=>{
			this.setState({
				types:resp.content,
				spost:resp.content
			});
		});
		if(tid) {
			postByType({typeid:tid}).then(resp=>{

    			if(resp.status===200) {
	    			this.setState({
	    				data: resp.content,
	    				typeid: parseInt(tid),
	    				categoryid: parseInt(cid)
	    			})
	    		}
    		});
    	} else {
    		postByCategory(
    			{categoryid:cid}
    		).then(resp=>{
    			console.info(resp.content);
    			if(resp.status===200) {
	    			this.setState({
	    				data: resp.content,
	    				categoryid: parseInt(cid)
	    			})
	    		}
    		});
    	}	
    }

    submitPost() {
    	const td = this.state.typeid;
    	if(td===-1) {
    		alert("请选择专区");
    		return;
    	}
    	const tl = this.state.title;
    	const ct = this.state.content;
    	submit({
    		title:tl,
    		context: ct,
    		typeid: td
    	}).then(resp=>{
    		if(resp.content) {
    			let array = this.state.data;
    			array.unshift(resp.content);
    			this.setState({
    			  data: array,
    			  content:"",
    			});
    		} 
    	})
    }

    onChangeState(context) {

    	this.setState({
    		content:context
    	}); 
    }

    ontypeChange(e) {
    	console.info(e.target.value);
    	this.setState({
    		typeid:e.target.value
    	})
    }

    textChange(e) {
    	let value = e.target.value;
    	this.setState({
    		title: value 
    	});
    }

	render() {
		return (
			<div className="App">
				<Header></Header>
				<section className="wp btm">
					<CommonBox title="最新回复" isDress="false"/>
					<div className="boardnav">
						<div id="ct" className="wp cl">
							<div className="mn">
								<div className="bm bml pbn">
									<div className="bm_h cl">
										<span className="y">
											<a href="#" className="fa_rss" target="_blank" title="RSS">订阅</a>
										</span>
										<h1 className="xs2">最新回贴</h1>
									</div>
									<div className="bm_c cl pbn">
										<div id="forum_rules_1163">
											<div className="ptn xg2"></div>
										</div>
									</div>
								</div>
							</div>
							<div className="line"></div>
							<ul className="ttp cl">
								{
									this.state.spost.map((li,index)=>(
										<li key={index}>
											<a href={"postlist?categoryid="+this.state.categoryid+"&typeid="+li.id}>{li.name}</a>
										</li>
										))
								}
							</ul>
							
							<div id="threadlist" className="tl bmw">
								<div className="th thb">
									<table cellSpacing="0" cellPadding="0">
										<thead>
											<tr>
												<th colSpan="3">标题</th>
												<td className="by">版块/群组</td>
												<td className="by">作者</td>
												<td className="num">回复/查看</td>
												<td className="by">最后发表</td>
											</tr>
										</thead>								
										<PostBody data={this.state.data}></PostBody>
									</table>
								</div>
							</div>

							{/*<div id="pgt" className="bw0 cl">
								<div className="pg">
									<strong>1</strong><a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=2">2</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=3">3</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=4">4</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=5">5</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=6">6</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=7">7</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=8">8</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=9">9</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=10">10</a>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=12" className="last">... 12</a>
									<label>
										<input type="text" name="custompage" className="px" size="2" title="输入页码，按回车快速跳转" defaultValue="1"/>
										<span title="共 12 页"> / 12 页</span>
									</label>
									<a href="http://www.htmlsucai.com/forum.php?mod=guide&amp;view=new&amp;page=2" className="nxt">下一页</a>
								</div>
							</div>*/}
							{this.state.login==true?
							<div className="wp">
								<label className="">
									<select height="20" value={this.state.typeid} onChange={this.ontypeChange.bind(this)} className="titlebox typewidth">
										<option value="-1">发帖专区</option>
										{
											this.state.types.map(type=>(
												<option key={type.id} value={type.id} >{type.name}</option>
											))
										}
									</select>
									<input type="text" value={this.state.title} onChange={this.textChange.bind(this)} height="20" placeholder="请输入标题" className="px titlebox titlewidth"/>
									<a href="#" className="titlebox submit" onClick={this.submitPost.bind(this)}><img src="http://www.htmlsucai.com/static/image/common/pn_post.png" alt="发新帖"/></a>
								</label>
								<div className="ptheight bgwhite ">
									<Editor value={this.state.content} onChange={this.onChangeState.bind(this)}/>
								</div>
							</div>:''
							}
						</div>
					</div>

				</section>
				<div className="push"></div>
				<Footer></Footer>
			</div>
		);
	}
}